<template>
<div class="login">     
  <header class="header">
  </header>
   <main>
            <form>
                <div class = "zc">登录</div>
                <table>
                    <tr><td><span>用户名</span></td><td>
                        <el-input
                            placeholder="请输入用户名"
                            v-model="user_name"
                            type="text"
                            clearable>
                        </el-input>
                        </td></tr>
                    <tr><td><span>密码</span></td><td>
                        <el-input
                            placeholder="请输入密码"
                            v-model="user_password"
                            type="password"
                            clearable>
                        </el-input>
                        </td></tr>   
                    <tr><td colspan="2">
                            <el-button type="primary"  @click.prevent="onLogin()">登录</el-button>
                        </td></tr>
                </table>
                </form>
            </main>
</div>
</template>
<script>
export default {
    data() {
        return {
            user_name: "",
            user_password: ""
        };
    },
    methods: {
        onLogin() {
            if (this.user_name == "") {
                this.$message({
                    message: "请输入用户名",
                    type: "warning"
                });
                return;
            }
            if (this.user_password == "") {
                this.$message({
                    message: "请输入密码",
                    type: "warning"
                });
                return;
            }
            this.$axiosPost(
                "/AdminService/login",
                { username: this.user_name, password: this.user_password },
                response => {
                    this.$message({
                        message: "登录成功",
                        type: "warning"
                    });
                    persistence.put("admin", response.data);
                    this.$router.push("/");
                },
                error => {
                    this.$message.error("登录失败，请检查网络环境！");
                }
            );
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zc {
    background: #009fcc;
    font-size: 24px;
    padding: 5px;
    color: white;
}
form {
    background: #f8f8ff;
    border: #357fc4 solid 1px;
    color: #575454;
    width: 400px;
    height: 300px;
    margin: 8% auto;
    font-size: 15px;
}
table {
    margin: 8% auto;
}
input[type="button"] {
    background: #228b22;
    color: white;
    font-size: 15px;
    font-weight: bold;
    width: 120px;
    height: 40px;
}
td:first-child {
    text-align: right;
    padding: 0 5px;
}
td:only-child {
    text-align: center;
    font-size: 12px;
}
</style>